<template>
    <h1>广告设置</h1>
    <div class="container">
        <el-button
            type="primary"
            style="margin-bottom: 10px"
            @click="visible = true"
        >
            新增banner
        </el-button>
        <el-table :data="types" border style="width: 100%" locale="zhCn">
            <el-table-column type="index" label="序号" width="180" />
            <el-table-column prop="banner_img" label="图片">
                <template #default="scope">
                    <img :src="scope.row.banner_img" alt="" srcset="" />
                </template>
            </el-table-column>
            <el-table-column prop="text" label="说明" />
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" @click="edit(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" @click="del(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model="visible"
            :title="selectId == 0 ? '新增banner' : '编辑'"
            destroy-on-close
            @close="selectId = 0"
        >
            <el-form>
                <el-form-item label="图片">
                    <copper
                        @change="change"
                        v-if="selectId != 0"
                        :width="100"
                        :height="300"
                        :fixed-number="[3, 1]"
                    >
                        <img
                            :src="
                                form.banner_img ||
                                types.find(r => r.id == selectId).banner_img
                            "
                        />
                    </copper>
                    <img v-if="selectId == 0" :src="form.banner_img" />
                    <copper @change="change" v-if="selectId == 0">
                        <el-button>上传</el-button>
                    </copper>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input type="text" v-model="form.text" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="submit">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import request from '@/api';
import { Type } from '@/types';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import copper from '@/components/copper.vue';
const visible = ref(false);
const typeName = ref('');
const selectId = ref(0);
const form = reactive({
    banner_img: '',
    text: '',
});
// 类型
const types = ref<Array<any>>([]);
const edit = row => {
    selectId.value = row.id;
    visible.value = true;
    form.banner_img = row.banner_img;
    form.text = row.text;
};
// 列表请求
request.get('/getBannerList').then(res => {
    types.value = res.data;
});
const change = (e: string) => {
    form.banner_img = e;
};

const submit = async () => {
    if (form.text == '') {
        ElMessage.error('说明不能为空');
        return;
    }
    if (form.banner_img == '') {
        ElMessage.error('图片不能为空');
        return;
    }
    await request({
        url: '/createOrEditBanner',
        method: 'post',
        data: {
            ...form,
            id: selectId.value == 0 ? undefined : selectId.value,
        },
    });
    ElMessage.success('操作成功');
    visible.value = false;
    form.banner_img = '';
    form.text = '';
    request.get('/getBannerList').then(res => {
        types.value = res.data;
    });
};

const del = async (id: number) => {
    await request({
        url: '/delBanner',
        method: 'post',
        params: {
            id,
        },
    });
    ElMessage.success('操作成功');
    request.get('/getBannerList').then(res => {
        types.value = res.data;
    });
};
</script>
<style scoped lang="less"></style>
